<template>
  <div class="ProductDetails">
    <!-- 头部 -->
    <div class="dark-top">
      <a @click="goback" class="page-back">
        <i class="mintui mintui-back"></i>
      </a>
      <div class="page-title">
        <font style="vertical-align: inherit;">{{ coun.name }}</font>
      </div>
      <!-- <a @click="getShareInfo" class="page-share"></a> -->
    </div>
    <!-- 内容 -->
    <div class="dark-body">
      <!-- 封面图 -->
      <div class="body-bg-img">
        <div :style="{ backgroundImage: 'url(' + gauge_img + ')' }"></div>
      </div>
      <div class="body-cont">
        <div class="conent-box">
          <div class="body-cont-title">{{ coun.name }}</div>
          <div class="cont-imgs">
            <div
              :class="gaugeNum == k ? 'cont-img-box' : ''"
              @click="gaugeShow(k)"
              v-for="(item, k) in gauge"
              :key="k"
              :style="{ backgroundImage: 'url(' + item.gauge_img + ')' }"
            ></div>
          </div>
          <div class="cont-guige">
            <span class="box_left">规格：{{ guage_name }}</span>
            <span class="box_right">下次发货：{{ coun.next_weeks }}</span>
          </div>
        </div>
      </div>
      <hr class="fen-pin" />
      <div class="cont-introduce">内容介绍</div>
      <div class="introduce">
        <div v-html="coun.content"></div>
      </div>
      <div style="height:2rem"></div>
    </div>
    <div style="height:3.0625rem"></div>
    <!-- 底部	 -->
    <div class="dark-foot">
      <div class="add-cart" @click="goShoppingCart">加购物车</div>
      <div class="payment" @click="ConsultApprove">立即预购</div>
    </div>

    <div class="dialog">
      <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
      <div class="dialog-cover back" v-show="isShow" @click="closeMyself"></div>
      <transition name="drop">
        <div class="dialog-content" v-show="isShow">
          <div class="dialog-top">
            <div class="dialog-colse" @click="closeDialog"></div>
            <div class="dialog-title">填写地址</div>
            <div class="dialog-clear" @click="closeInfo">清除</div>
          </div>
          <!--弹窗的内容-->
          <div class="dialog-con-style">
            <div class="con-style-box">
              <span>收货人姓名</span
              ><input ref="dropName" type="text" :value="address.name" />
            </div>
            <div class="con-style-box">
              <span>收货人电话</span
              ><input
                ref="dropTel"
                type="number"
                placeholder="填写手机号"
                :value="address.phone"
              />
            </div>
            <div class="con-style-box">
              <span>苑/楼</span
              ><input ref="dropSite1" type="text" :value="address.site1" />
            </div>
            <div class="con-style-box">
              <span>栋数</span
              ><input ref="dropSite2" type="number" :value="address.site2" />
            </div>
            <div class="con-style-box">
              <span>寝室号</span
              ><input
                ref="dropSite3"
                type="text"
                placeholder="4单元 502"
                :value="address.site3"
              />
            </div>
          </div>
          <!--弹窗确认按钮-->
          <div class="dialog-confirm" @click="bounced">确认收货地址</div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
import wx from "weixin-js-sdk"; // 引入微信SDK
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      statusId: "",
      gauge: [],
      gaugeNum: -1,
      guage_name: "绿色",
      gauge_img:
        "https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/cover.png",
      coun: {
        id: "",
        name: "精品保温杯",
        next_weeks: "2020-05-06",
        content:
          "<img src='https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/introduce.png'/>"
      },
      isShow: false,
      address: []
    };
  },
  created() {
    this.statusId = this.$route.params.sp_id;
    this.selProductDetails();
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    bounced() {
      //联系地址填写
      let name = this.$refs.dropName.value;
      let tel = this.$refs.dropTel.value;
      let site1 = this.$refs.dropSite1.value;
      let site2 = this.$refs.dropSite2.value;
      let site3 = this.$refs.dropSite3.value;
      let site = site1 + "-" + site2 + "-" + site3;

      Indicator.open({ spinnerType: "fading-circle" });
      this.addGoodsCart(name, tel, site);
      this.closeDialog();
    },
    closeMyself() {
      this.isShow = true; //显示弹框
      this.selectBouncedAddress();
    },
    closeDialog() {
      this.isShow = false; //关闭弹窗
    },
    closeInfo() {
      this.address = []; //清除内容
    },
    //弹框获取上一次地址
    selectBouncedAddress() {
      let me = this;
      this.$axios
        .post(
          "/api/mall/bouncedAddress",
          { uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          //console.log(kun);
          if (kun.code == 200) {
            me.address = kun.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //规格切换
    gaugeShow(con) {
      this.gaugeNum = con;
      this.guage_name = this.gauge[con].gauge;
      this.gauge_img = this.gauge[con].gauge_img;
    },
    //到购物车
    goShoppingCart() {
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/mall/shoppingCart",
          {
            sp_id: this.coun.id,
            uid: localStorage.uid
          },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            Toast(kun.msg);
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //详情页获取数据
    selProductDetails() {
      if (this.statusId == null) {
        this.statusId = localStorage.sp_id;
      }

      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/mall/goodsDetails",
          {
            sp_id: this.statusId,
            uid: localStorage.uid
          },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.coun.id = kun.data.id;
            me.coun.name = kun.data.name;
            me.coun.next_weeks = kun.data.next_weeks;
            me.coun.content = kun.data.content;
            me.gauge = kun.msg;
            me.gaugeNum = 0;
            me.guage_name = kun.msg[0].gauge;
            me.gauge_img = kun.msg[0].gauge_img;
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 进行商城认证判断
    ConsultApprove() {
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/mall/consultApprove",
          { uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          //console.log(kun);
          if (kun.code == 200) {
            //认证后 唤起弹框
            me.closeMyself();
          } else if (kun.code == 600) {
            // 未认证 跳转
            me.$router.push({ name: "ConsultApprove" });
          } else {
            Toast(kun.msg);
          }
          Indicator.close();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //商品详情页 立即支付 生成订单
    addGoodsCart(name, tel, site) {
      if (this.statusId == null) {
        this.statusId = localStorage.sp_id;
      }
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/mall/consultOrder",
          {
            uid: localStorage.uid,
            sp_id: this.statusId,
            name: name,
            tel: tel,
            site: site,
            time: this.coun.next_weeks
          },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.goOrderDetails(kun.data.id);
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //到详情页
    goOrderDetails(val) {
      localStorage.or_id = val;

      this.$router.push({
        name: "OrderDetails",
        params: { or_id: val }
      });
    },
    getShareInfo() {
      wx.ready(function() {
        /* 转发好友 */
        wx.updateAppMessageShareData({
          title: "测试标题", // 分享标题
          desc: "测试内容", // 分享描述
          link: "https://jinbiaobiao.com/#/ProductDetails", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:
            "https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/my_head.png", // 分享图标
          success: function() {
            alert("成功分享朋友圈");
          }
        });

        /* 转发朋友圈 */
        wx.updateTimelineShareData({
          title: "测试标题",
          link: "https://jinbiaobiao.com/#/ProductDetails",
          imgUrl:
            "https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/my_head.png",
          success: function() {
            alert("成功分享朋友圈");
          }
        });
      });
    },
    wxconfig() {
      var getwxconfig = "api/wx_sign/share";
      var shareurl = location.href.split("#")[0];

      let me = this;
      this.$axios
        .post(getwxconfig, { callback: shareurl }, { emulateJSON: true })
        .then(kun => {
          console.log(kun);
          var json = kun.result;
          if (json["appId"]) {
            wx.config({
              //调试模式 truess
              debug: true,
              appId: json["appId"],
              timestamp: json["timestamp"],
              nonceStr: json["nonceStr"],
              signature: json["signature"],
              jsApiList: [
                "updateTimelineShareData",
                "updateAppMessageShareData",
                "onMenuShareWeibo",
                "onMenuShareQZone",
                "hideMenuItems",
                "hideOptionMenu",
                "showOptionMenu"
              ]
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  props: {
    //下面这些属性会绑定到div上面 详情参照上面的html结构
    // 如： :style="{top:topDistance+'%',width:widNum+'%'}"
    widNum: {
      //内容宽度
      type: Number,
      default: 60
    },
    leftSite: {
      // 左定位
    },
    topDistance: {
      //top上边距
    },
    pdt: {
      //上padding
      type: Number,
      default: 10
    },
    pdb: {
      //下padding
      type: Number,
      default: 11
    }
  }
};
</script>
<style scoped>
.introduce >>> p {
  font-size: 1rem !important;
}
.introduce >>> img {
  max-width: 100%;
}
</style>
<style lang="scss" scoped>
h3,
h4 {
  margin: 0;
  padding: 0;
}
.box_left {
  float: left;
}
.box_right {
  float: right;
}
/* 头部 */
.dark-top {
  width: 100%;
  height: 2.75rem;
  color: #ffffff;
  position: fixed;
  top: 0;
  z-index: 9999;
  /* 设置渐变 */
  background: rgb(255, 0, 0); /* Old browsers */
  background: -moz-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  .page-back {
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
    top: 1.0625rem;
    left: 0.9375rem;
    position: absolute;
    text-align: center;
  }
  .page-back i {
    width: 0.53125rem;
    height: 0.9375rem;
    font-size: 1.25rem;
  }
  .page-title {
    font-size: 1.25rem;
    text-align: center;
    display: block;
    line-height: 1;
    position: absolute;
    top: 0.9375rem;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(0); /* IE 9 */
    -moz-transform: translateX(-50%) translateY(0); /* Firefox */
    -webkit-transform: translateX(-50%) translateY(0); /* Safari 和 Chrome */
    -o-transform: translateX(-50%) translateY(0); /* Opera */
  }
  //分享
  .page-share {
    width: 0.9375rem;
    height: 0.875rem;
    display: block;
    position: absolute;
    top: 1.125rem;
    right: 0.9375rem;
    background-image: url(../../assets/shop/share.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
}

/* 内容 */
.dark-body {
  width: 100%;
  margin-top: 2.75rem;

  .body-bg-img {
    width: 100%;
    height: 12.5rem;
    margin: 0 auto;

    :first-child {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/shop/cover.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
  //说明
  .body-cont {
    width: 23.4375rem;
    height: 6.5rem;
    margin: 0 auto;

    .conent-box {
      margin: 0.5625rem 0.9375rem 0.9375rem;
      clear: both;
    }
    .body-cont-title {
      font-size: 1rem;
      font-weight: bold;
      color: #333333;
    }
    .cont-imgs {
      margin-top: 0.625rem;
      height: 1.875rem;

      div {
        width: 1.875rem;
        height: 1.875rem;
        float: left;
        margin-right: 0.625rem;
        border-radius: 0.9375rem;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .cont-img-box {
        border: 0.0625rem solid red;
      }
      .cont-imgs1 {
        background-image: url(../../assets/shop/share1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
      .cont-imgs2 {
        background-image: url(../../assets/shop/share2.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
      .cont-imgs3 {
        background-image: url(../../assets/shop/share3.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
    }
    .cont-guige {
      font-size: 0.8125rem;
      margin-top: 0.625rem;
      color: #999999;
    }
  }
  .fen-pin {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 0.1875rem;
    background-color: #f8f7f7;
    border: unset;
  }
  //内容介绍
  .cont-introduce {
    padding-left: 0.9375rem;
    width: 22.5rem;
    margin: 1.25rem auto 0;
    font-size: 1rem;
    color: #333333;
    font-weight: bold;
  }
  .introduce {
    width: 100%;
    margin-top: 0.625rem;

    .introduce-img {
      width: 100%;
      height: 12.5rem;
      background-image: url(../../assets/shop/introduce.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
}

//底部
.dark-foot {
  height: 3.0625rem;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 9999;

  div {
    width: 50%;
    height: 3.0625rem;
    float: left;
    color: #ffffff;
    text-align: center;
    line-height: 3.0625rem;
  }
  .add-cart {
    background-color: #ffd1cb;
  }
  .payment {
    background-color: #ff1d00;
  }
}

//弹框
// 最外层 设置position定位
.dialog {
  position: relative;
  color: #2e2c2d;
}
// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
.dialog-cover {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
// 内容层 z-index要比遮罩大，否则会被遮盖，
.dialog-content {
  position: fixed;
  bottom: 0;
  // 移动端使用felx布局
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
//弹框内容
.dialog-content {
  width: 100%;
  height: 23.25rem;
  border-radius: 1.875rem 1.875rem 0 0;
  background-color: white;

  //顶部
  .dialog-top {
    border-bottom: 0.0625rem solid #e6e6e6;
    width: 100%;
    height: 2.9375rem;
    position: absolute;
    top: 0;

    div {
      display: inline-block;
      line-height: 2.9375rem;
      position: absolute;
    }
    .dialog-colse {
      width: 0.8125rem;
      height: 0.8125rem;
      top: 1.21875rem;
      left: 0.90625rem;
      background-image: url(../../assets/shop/clear.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
    .dialog-title {
      font-size: 1.125rem;
      color: #343434;
      font-family: PingFang SC;
      font-weight: 500;

      left: 50%;
      -ms-transform: translateX(-50%) translateY(0); /* IE 9 */
      -moz-transform: translateX(-50%) translateY(0); /* Firefox */
      -webkit-transform: translateX(-50%) translateY(0); /* Safari 和 Chrome */
      -o-transform: translateX(-50%) translateY(0); /* Opera */
    }
    .dialog-clear {
      right: 0.9375rem;
      font-size: 0.75rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      background: linear-gradient(-10deg, #ff8060 0%, #e5284e 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  //内容
  .dialog-con-style {
    width: 18.75rem;
    position: absolute;
    top: 3.875rem;

    .con-style-box {
      margin-bottom: 0.625rem;
      height: 1.875rem;
      position: relative;

      span {
        height: 100%;
        display: inline-block;
        width: 5.25rem;
        font-size: 0.9375rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;
        line-height: 1.875rem;
        text-align: right;
      }
      input {
        outline: none;
        width: 10.9375rem;
        height: 100%;
        border: 0.03125rem solid #dedddd;
        border-radius: 0.3125rem;
        position: absolute;
        right: 1.1875rem;
      }
    }
  }

  //确认按钮
  .dialog-confirm {
    width: 18.75rem;
    height: 3.125rem;
    position: absolute;
    top: 17.375rem;
    border-radius: 1.5625rem;
    line-height: 3.125rem;
    text-align: center;
    font-size: 1.125rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;

    /* 设置渐变 */
    background: rgb(255, 0, 0); /* Old browsers */
    background: -moz-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 30%,
      rgb(229, 39, 77) 80%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }
}
</style>
